<template>
  <div>
    <div class="box">
      <div class="box1">
        <img
          src="https://static.asus.com.cn/store/20230202/18492553565597.png"
          alt=""
        />
      </div>
      <div class="box2">
        <div class="box4">
          <img
            src="	https://static.asus.com.cn/store/20230201/21383155985655.png"
            alt=""
          />
        </div>
        <div class="box4">
          <img
            src="https://static.asus.com.cn/store/20230204/15133648100974.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="pp">
      <div class="pl">
        <img
          src="https://static.asus.com.cn/store/20230202/18433757569850.png"
          alt=""
        />
      </div>
      <div class="pl">
        <img
          src="https://static.asus.com.cn/store/20230201/21394310251991.png"
          alt=""
        />
      </div>
      <div class="pl">
        <img
          src="https://static.asus.com.cn/store/20230201/21413410153571.png"
          alt=""
        />
      </div>
      <div class="pl">
        <img
          src="https://static.asus.com.cn/store/20230201/21421757569852.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  height: 12.9375rem;
  display: flex;
  margin: 10px;
  justify-content: space-evenly;
  width: 100%;
}

.box .box1 {
  width: 49%;
  height: 12.9375rem;

  border-radius: 10px;
}
.box .box1 img {
  width: 100%;
  height: 12.9375rem;
}

.box2 {
 flex: 1;
  height: 12.9375rem;
}
.box2 .box4 {
  width: 100%;
  height: 6.25rem;

  margin: 2px 0;
}
.box2 .box4 img {
width: 100%;
  height: 6.25rem;
}
.pp {
  margin: 10px;
  height: 12.5rem;
  border-radius: 10px;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
.pp .pl {
  width: 48%;
  height: 6.25rem;
}
.pp .pl img{
 width: 100%;
  height: 6.25rem;
  
}
</style>